@element: 'panel';
@import (multiple) 'theme.less';
@import (multiple) 'globals/layout.less';

@import url('editor-framework://dist/css/globals/fontello.css');

:host {
  overflow: hidden;
}

/*-------------------
  header
--------------------*/

h1,
h2,
h3,
h4,
h5 {
  font-family: @header_font;
  font-weight: bold;
  padding: 0em;
}

/*-------------------
  scroll bar
--------------------*/

::-webkit-scrollbar {
  height: 11px;
  width: 11px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  border: 4px solid transparent;
  background: @thumb_bg;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  border-radius: 5px;
  border: 3px solid transparent;
  background: @el_focus_color;
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  border: 5px solid transparent;
  background: @scrollbar_bg;
  background-clip: content-box;
}

::-webkit-scrollbar-track:hover {
  border: 5px solid transparent;
  background: @scrollbar_bg;
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  display: none;
}

::-webkit-scrollbar-button {
  display: none;
}

.scroll {
  /* &:hover::-webkit-scrollbar-thumb { */
  /*   border-radius: 5px;              */
  /*   border: 3px solid transparent;   */
  /*   background: @thumb_bg + 20%;     */
  /*   background-clip: content-box;    */
  /* }                                  */

  &::-webkit-scrollbar-thumb:hover {
    border-radius: 5px;
    border: 3px solid transparent;
    background: @el_focus_color;
    background-clip: content-box;

    transition: background 500ms;
  }
}
